<template>
    <div>
        <div @click="clickKeyWords" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <SearchLocate/>
            </n-icon>
            <Handle id="KeyWords-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>分析关键词</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    分析关键词
                </template>

                    <n-upload
                        :action="app.ip+'perform_tasks/keyword_analysis'"
                        :headers="{token: user.getToken}"
                        @finish="handleFinish"
                        :data="{number}"
                        accept=".txt,.TXT,.docx,.DOCX"
                    >
                        <n-space>
                        <n-button>读取文件</n-button>
                            <div @click.stop>
                                <n-input-number v-model:value="number" clearable placeholder="截切前n条数据"/>
                            </div>
                        </n-space>
                    </n-upload>



                <!--展示文件-->
<!--                <n-data-table :columns="props.data.data.title" :data="props.data.data.data" :pagination="pagination"/>-->
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>
import {SearchLocate} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";

const app = useAppStore()
const user = useUserStore()
const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data'])

// 点击添加文件组件
const clickKeyWords = () => {
    active.value = true
}
// 抽屉是否打开
const active = ref(false)

// 获取前多少的数据
const number = ref(null)
// 后端读取读取文件结束
const handleFinish = ({event}) => {
    // 后端读取读取文件结束
    const response = JSON.parse(event.currentTarget.response)
    console.log(response)
    props.data.data = response.data
    props.data.data.title.map(s=>{
        console.log(s)
    })
    window.$message[response.tip.type](response.tip.info)

}
// 单页数据量
const pagination = {
    pageSize: 10
}


</script>

<style scoped lang="less">

</style>